{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<style>
    .count_row{
        display: flex;
        justify-content: flex-end;
        flex-direction: row;
        align-content: center;
        align-items: center;
    }
    .row_item{
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        margin: 0 10px;
    }
</style>
<div class="layui-col-lg12 layui-col-md12 layui-col-sm12">

    <div class="">
        <form class="layui-form gg-form-bar border-t border-x">

             <div class="layui-input-inline" style="width:300px;">
                <input type="text" name="p_name" placeholder="供应商名称" class="layui-input" autocomplete="off" />
            </div>
            <div class="layui-input-inline" style="width:300px;">
                <input type="text" id="orderDate" readonly name="orderDate" placeholder="单据日期" class="layui-input" autocomplete="off" />
            </div>

            <div class="layui-input-inline" style="width:150px;">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webformIndex"><i class="layui-icon layui-icon-search mr-1"></i>搜索</button>
            </div>
        </form>
        <div class="p-3">
            <div>
                <div class="count_row">
                    <div class="row_item">应付总额：<span id="ys">9</span></div>
                    <div class="row_item">已付款总额：<span id="yhk">12345678.99</span></div>
                    <div class="row_item">未付款总额：<span id="whk">46</span></div>
                </div>
                <table class="layui-hide" id="treeTable" lay-filter="treeTable"></table>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarDemo">
    <a class="layui-btn layui-btn-sm layui-btn-normal " target="_blank" href="{:url('exportData')}">导出</a>
</script>
<script type="text/html" id="actionBar">

</script>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool'];
    var mStatus=['','草稿','已确认'];
    function gouguInit() {
        var treeTable = layui.treeTable, tool = layui.tool,form = layui.form,laydate=layui.laydate;
        var upload=layui.upload;
        var tableIns = treeTable.render({
            elem: '#treeTable'
            , url: "{:url('index')}"
            ,toolbar: '#toolbarDemo',
            defaultToolbar:  ['filter',  'exports']
            , tree: { // treeTable 特定属性集
                customName: {name: 'name'},
                data: {},
                view: {showIcon: false},
                async: {},
                callback: {}
            }
            , cellMinWidth: 80
            , cols: [[
                // {type: 'checkbox', fixed: 'left' },
                // {fixed: 'left',field: 'id',title: 'ID' ,unresize: true,hide:true},
                // {field: 'id', width: 80, title: 'ID号', align: 'center'}
                , {field: 'pName',  title: '供应商'}
                , {field: 'reconcilePrice',  title: '应付金额'}
                , {field: 'savedMoney',  title: '已付款金额'}
                , {field: 'unPrice',  title: '未付款金额'}
            ]]
            , page: true
            ,parseData:function (res) {
                $("#ys").text(res.ys);
                $("#yhk").text(res.yhk);
                $("#whk").text(res.whk);
            }
        });
        //监听搜索提交
        form.on('submit(webformIndex)', function (data) {
            tableIns.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        });
        //表头工具栏事件



        laydate.render({
            elem: '#orderDate'
            ,type: 'date',
            range:"~"
        });
    }



</script>
{/block}
<!-- /脚本 -->